<template>
  <img alt="Vue logo" src="./assets/logo.png">

<!--school -->
选择学校：
  <button v-for="(item, i) in schools" v-bind:key ="i" @click="selSchoolFun(i)">
    {{i}} : {{item}}
  </button>

{{selSchool}}
<br/>
<!--color -->
选择颜色：
 <button v-for="(item, i) in colors" v-bind:key ="i" @click="selColorFun(i)">
    {{i}} : {{item}}
  </button>
  {{selColor}}
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch} from 'vue';

interface DataProps {
  colors: string[];
  selColor: string;
  selColorFun: (i: number) => void;
}

export default defineComponent({
  name: 'App',
  components: {
    
  },
  setup(){
    //school
    const schools = ref(["大张","梁庄", "二高"]);
    const selSchool = ref("");
    const selSchoolFun = (i: number) => {
      selSchool.value = schools.value[i];
    };

    //color
    const data: DataProps = reactive({
        colors : ["小红","小蓝", "小绿"],
        selColor : "",
        selColorFun : (i: number) => {
          data.selColor = data.colors[i]
        }

    });

//检测reactive中的值
    // watch(() => data.selColor, (newValue, oldValue) => {
    //   console.log(`new--->${newValue}`);
    //   console.log(`old--->${oldValue}`);
    //   document.title = newValue;
    // });
//同时检测
    // watch(selSchool, (newValue, oldValue) => {
    //   console.log(`new--->${newValue}`);
    //   console.log(`old--->${oldValue}`);
    //   document.title = newValue;
    // });

//检测多个值
    // watch([selSchool, () => data.selColor], (newValue, oldValue) => {
    //   console.log(`new--->${newValue}`);
    //   console.log(`old--->${oldValue}`);
    //   document.title = oldValue[1];//数组0 表示第一个检测值
    // });

//检测多个值
    watch([selSchool, () => data.selColor], ([newSchool, newColor],[oldSchool,oldColor]) => {
      console.log(`new--->${newSchool}`);
      console.log(`old--->${oldSchool}`);
      document.title = newColor + "" + oldColor;
    });

    const refData = toRefs(data);

    return { 
      schools,
      selSchool,
      selSchoolFun,

      ...refData
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
